<!DOCTYPE html>
<html lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head th:include="/common/inc::header"/>
<body>
<form class="layui-form" id="customerForm">
    <input name="id" id="id" type="hidden"/>
    <input name="headImgUrl" id="headImgUrl" type="hidden"/>
    <br/>
    <div class="layui-form-item" style="margin-left: 15%">
        <label class="layui-form-label">昵称:</label>
        <div class="layui-input-inline">
            <input type="text" name="nickName" id="nickName" placeholder="请输入昵称" autocomplete="off"
                   class="layui-input" lay-verify="required">
        </div>
    </div>
    <hr class="layui-bg-gray">
    <div class="layui-form-item" style="margin-left: 15%">
        <label class="layui-form-label">姓名:</label>
        <div class="layui-input-inline">
            <input type="text" name="userName" id="userName" placeholder="请输入名字" autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <hr class="layui-bg-gray">
    <div class="layui-form-item" style="margin-left: 15%">
        <label class="layui-form-label">账号:</label>
        <div class="layui-input-inline">
            <input type="text" name="account" id="account" placeholder="请输入手机号码" autocomplete="off"
                   class="layui-input" lay-verify="required|phone|number">
        </div>
    </div>
    <hr class="layui-bg-gray">
    <div class="layui-form-item" style="margin-left: 15%">
        <label class="layui-form-label">密码:</label>
        <div class="layui-input-inline">
            <input type="text" name="password" id="password" placeholder="请输入密码" autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <hr class="layui-bg-gray">
    <div class="layui-form-item" style="margin-left: 15%">
        <label class="layui-form-label">头像:</label>
        <div class="layui-input-inline">
            <div class="image-uploader">
                <div class="image-preview">
                    <div class="image">
                        <img src="" id="img">
                        <span class="image-browse" onclick="uploadFun('img')"><strong>上传图片</strong><span
                                class="progress"><span class="progress-bar"></span></span></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <hr class="layui-bg-gray">
    <div class="layui-form-item" style="margin-left: 15%">
        <label class="layui-form-label">常住地:</label>
        <div class="layui-input-inline">
            <input type="text" name="address" id="address" placeholder="请输入用户常住地" autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <hr class="layui-bg-gray">
    <div class="layui-form-item" style="margin-left: 15%">
        <label class="layui-form-label">身份证:</label>
        <div class="layui-input-inline">
            <input type="text" name="idCard" id="idCard" placeholder="请输入用户身份证" autocomplete="off"
                   class="layui-input" lay-verify="identity">
        </div>
    </div>
    <hr class="layui-bg-gray">
    <div class="layui-form-item" style="margin-left: 15%">
        <label class="layui-form-label">会员类型</label>
        <div class="layui-input-inline">
            <select name="isVip" id="isVip" lay-verify="required">
                <option value="0">非会员</option>
                <option value="1">试用会员</option>
                <option value="2">任享会员</option>
                <option value="3">畅享会员</option>
                <option value="4">季卡会员</option>
            </select>
        </div>
    </div>
    <hr class="layui-bg-gray">
    <div class="layui-form-item" style="margin-left: 15%">
        <label class="layui-form-label">出生日期:</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input" id="birthday" name="birthday">
        </div>
    </div>
    <button class="layui-btn" id="formSubmit" lay-submit="" lay-filter="formSubmit" style="display: none">立即提交
    </button>
</form>
<script th:replace="/common/inc::incJs"></script>
<style type="text/css">
    .table td {
        text-align: left;
    }

    img {
        width: 160px;
        height: 160px;
    }

    .fancybox {
        margin: 5px;
        width: 120px;
        height: 160px;
        position: relative;
    }

    .upload_progress {
        margin: 0px;
        padding: 5px 0px;
        width: 100%;
        color: #fff;
        background-color: rgba(0, 0, 0, .6);
        position: absolute;
        bottom: 0px;
        font-size: 14px;
        text-align: center;
        z-index: 2;
    }

    .imgDiv {
        display: inline-block;
        position: relative;
    }
</style>
<script>
    var form = layui.form;
    var successCallback;
    var id = getQueryString("id");
    $("#id").val(id);

    var config = {
        width: 300,
        height: 300,
        strictSize: true,
        url: "",
        back: "",
        obj: null,
        formobj: null,
        status: null,
        type:"single"
    };

    var uploadFun = function (obj) {
        config.obj = $("#" + obj);
        config.formobj = $(':input[name="headImgUrl"]');
        openDialog({
            url: "/backend/security/customer/uploadImage",
            area: ["50%", "75%"]
        });
    };

    //监听提交
    form.on('submit(formSubmit)', function (data) {
        if (id != "") {
            $.post('/backend/security/customer/updateCustomer', data.field, function (res) {
                if (res.code < 0) {
                    layer.msg(res.message);
                }
                else {
                    successCallback && successCallback();
                    layer.msg("更新成功");
                }
            });
            return false;
        }
        else {
            $.post('/backend/security/customer/addCustomer', data.field, function (res) {
                if (res.code < 0) {
                    layer.msg(res.message);
                }
                else {
                    successCallback && successCallback();
                    layer.msg("新增成功");
                }
            });
            return false;
        }
        return false;
    });

    var formSubmit = function (callback) {
        successCallback = callback;
        $("#formSubmit").click();
    }

    //时间控件
    layui.use('laydate', function () {
        var laydate = layui.laydate;
        laydate.render({
            elem: '#birthday' //指定元素
        });
    });

    //初始化加载
    $(function () {
        if (id != "") {
            $("#account").attr("display","none");
            $.post('/backend/security/customer/getById', {id: id}, function (res) {
                if (res.code < 0) {
                    layer.msg(res.message);
                }
                else {
                    $("#customerForm").loadData(res.body);
                    $("input[name='sex'][value=" + res.body.sex + "]").attr("checked", true);
                    $("#img").attr("src", res.body.headImgUrl);
                    form.render('radio');
                }
            });
        }
    })
</script>
</body>
</html>
